<template>
  <div class="login">
    <div class="content">
      <div class="slogan">
        <p class="slogan-label">消防安全学习平台</p>
        <el-image style="width: 538px; height: 445px" :src="login_bg" />
      </div>

      <div class="login-form">
        <p class="title">账号登录</p>
        <el-form
          ref="loginFormRef"
          :model="formData"
          :rules="rules"
          label-width="0"
          status-icon
        >
          <el-form-item prop="loginCode">
            <div class="input-warp">
              <el-image class="icon" :src="user_icon" />
              <el-input
                maxlength="20"
                clearable
                v-model="formData.loginCode"
                placeholder="输入账号"
              />
            </div>
          </el-form-item>
          <el-form-item prop="pwd">
            <div class="input-warp">
              <el-image class="icon" :src="lock_icon" />
              <el-input
                clearable
                show-password
                v-model="formData.pwd"
                placeholder="输入密码"
              />
            </div>
          </el-form-item>
          <el-form-item prop="captcha">
            <div class="captcha-input-warp">
              <div class="input-warp" style="width: 350px">
                <el-image class="icon" :src="secure_icon" />
                <el-input
                  clearable
                  v-model="formData.captcha"
                  placeholder="输入验证码"
                />
              </div>
              <el-image
                class="captcha-image"
                @click="getCaptcha"
                :src="captchaSrc"
              />
            </div>
          </el-form-item>
        </el-form>
        <el-button
          size="large"
          class="login-button"
          @click="onLogin(loginFormRef)"
          :loading="loginButtonLoading"
        >
          登录
        </el-button>
        <div class="login-form-bottom">
          <div class="login-form-bottom-logo-warp">
            <el-image class="login-form-bottom-logo" :src="xm_logo" />
            <p class="login-form-bottom-label">小马国炬</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useUserStore from "@/store/useUserStore.ts";
import { captcha, login, resultEn, selectDicts } from "@/api/system.ts";
import { useRouter } from "vue-router";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import useEnumStore from "@/store/useEnumStore.ts";
import useDictStore from "@/store/useDictStore.ts";
import { onMounted, ref } from "vue";
import md5 from "js-md5";
import ecp_icon from "@/assets/images/ecp_icon.png";
import login_bg from "@/assets/images/login_bg.png";
import user_icon from "@/assets/images/user_icon.png";
import lock_icon from "@/assets/images/lock_icon.png";
import secure_icon from "@/assets/images/secure_icon.png";
import xm_logo from "@/assets/images/xm_logo.png";

interface IFormData {
  loginCode: string;
  pwd: string;
  captcha?: string;
}

const router = useRouter();
const userStore = useUserStore();
const enumStore = useEnumStore();
const dictStore = useDictStore();
const formData = ref<IFormData>({
  loginCode: "",
  pwd: "",
  captcha: "",
});

const rules = <FormRules<IFormData>>{
  loginCode: [{ required: true, message: "请输入账号", trigger: "blur" }],
  pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
  captcha: [{ required: true, message: "请输入图片验证码", trigger: "blur" }],
};

const loginButtonLoading = ref<boolean>(false);
const captchaSrc: any = ref();
const loginFormRef = ref();

async function onLogin(formEl: FormInstance | undefined) {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loginButtonLoading.value = true;
      const params: any = {
        captcha: formData.value.captcha,
        loginCode: formData.value.loginCode,
        pwd: md5(formData.value.pwd),
      };
      const { data, msg, success } = await login(params);
      loginButtonLoading.value = false;
      if (!success) {
        await getCaptcha();
        ElMessage.error(msg);
        return;
      }

      await userStore.setUserData(data);
      await router.push({ path: "/dashboard", replace: true });
      await getResultEn();
      await getDicts();
    } else {
      console.log("error submit!", fields);
    }
  });
}

async function getCaptcha() {
  const data: any = await captcha();
  captchaSrc.value = window.URL.createObjectURL(data);
}

async function getResultEn() {
  const { data, msg, success } = await resultEn();

  if (!success) {
    ElMessage.error(msg);
    return;
  }

  await enumStore.setEnumData(data);
}

async function getDicts() {
  const { data, msg, success } = await selectDicts();

  if (!success) {
    ElMessage.error(msg);
    return;
  }

  await dictStore.setDictData(data);
}

async function keyDown(e: any) {
  //如果是回车则执行登录方法
  if (e.keyCode == 13) {
    await onLogin(loginFormRef.value);
  }
}

onMounted(() => {
  getCaptcha();
  window.addEventListener("keydown", keyDown);
});
</script>

<style scoped lang="scss">
.login {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  height: 100vh;
  align-items: center;
  box-sizing: border-box;

  .top-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10%;
    width: 100%;
    height: 70px;
    background: #ffffff;
    box-shadow:
      0px 0px 1px 0px rgba(0, 0, 0, 0.04),
      0px 0px 2px 0px rgba(0, 0, 0, 0.06),
      0px 4px 8px 0px rgba(0, 0, 0, 0.04);

    .top-column-right {
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        width: 100px;
        height: 22px;
        font-size: 20px;
        font-weight: 500;
        color: #95999d;
        line-height: 22px;
        margin-right: 8px;
      }
    }

    .top-column-left {
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        width: 100px;
        height: 22px;
        font-size: 20px;
        //font-weight: 500;
        //color: #95999d;
        line-height: 22px;
        margin-left: 8px;
        font-weight: bold;
      }
    }
  }

  .content {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
  }

  .slogan {
    .slogan-label {
      margin-left: 112px;
      font-size: 40px;
      font-weight: bold;
      color: #313335;
      line-height: 47px;
    }
    .sub-slogan-label {
      margin-left: 112px;
      font-size: 18px;
      font-weight: 400;
      color: #62666a;
      line-height: 21px;
    }
  }

  .login-form {
    width: 400px;
    height: 478px;
    background: #ffffff;
    box-shadow:
      0px 0px 1px 0px rgba(0, 0, 0, 0.04),
      0px 4px 8px 0px rgba(0, 0, 0, 0.04),
      0px 16px 24px 0px rgba(0, 0, 0, 0.04),
      0px 24px 32px 0px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 76px 40px 0 40px;
    margin-left: 250px;

    .login-button {
      width: 100%;
      height: 46px;
      background: #165dff;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      color: #ffffff;
    }

    .login-form-bottom {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;

      .login-form-bottom-logo-warp {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;

        .login-form-bottom-logo {
          width: 24px;
          height: 24px;
        }

        .login-form-bottom-label {
          height: 24px;
          font-size: 16px;
          font-weight: 600;
          color: #b4b4b4;
          line-height: 24px;
        }
      }

      .forgot-password-tips {
        font-size: 16px;
        font-weight: 400;
        color: #165dff;
        line-height: 24px;
      }
    }

    .title {
      font-size: 24px;
      font-weight: 500;
      color: #2b2d2e;
      line-height: 28px;
    }

    .captcha-input-warp {
      width: 100%;
      display: flex;

      justify-content: space-between;
    }

    .captcha-image {
      width: 100%;

      height: 44px;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid #ededed;
      margin: 12px 0 0 12px;
    }

    .input-warp {
      display: flex;
      align-items: center;
      height: 44px;
      width: 100%;
      box-sizing: border-box;
      padding: 12px 8px;
      margin: 12px 0;
      background: #f7f7f8;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;

      .icon {
        width: 20px;
        height: 20px;
      }

      :deep(.el-input__wrapper) {
        margin: 0;
        background: #f7f7f8;
        box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color))
          inset;
        cursor: default;
        .el-input__inner {
          cursor: default !important;
          font-size: 18px;
          //font-weight: bold;
        }
      }
    }
  }
}
</style>
